<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../include/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css" />
	<link rel="stylesheet" href="<%=basePath%>css/wall.css" />
</head>
<body class="bg" style="font-family:微软雅黑;">
	<div class="container" style="padding-top:60px;">
		<%@ include file="../include/nav.jsp" %>
		<div class="row">
			<%@ include file="../include/left.jsp" %>
			<div class="span9 offset3 wall">
				<div class="breadcrumb span9 head"">
					<ul >
						<li style="font-size:18px;font-weight:bold;padding-top:6px">
							全部联系人和公司
						</li>
					</ul>
				</div>
				<div class="">
					<div>
						<p style="font-size:14px;">查找我的联系人按照:</p>
						<div  style="font-size:12px;margin-bottom:20px;margin-left:80px">
							<a href="#" id="searchName" style="text-decoration:underline;">姓名</a>
							<a href="" style="text-decoration:underline;">主题</a>
							<a href="" style="text-decoration:underline;">邮箱</a>
							<a href="" style="text-decoration:underline;">地址</a>
							<a href="" style="text-decoration:underline;">电话</a>
							<a href="" style="text-decoration:underline;">背景</a>
							<a href="" style="text-decoration:underline;">主页</a>
						</div>
						<div>
							<form  action="#" class="offset2" style="display:none;">
								<div id="showSearch" class="input-append">
									<label>请输入联系人名字：</label>
									<input type="text" name="contacts.contactName"/><span class="add-on"><i class="icon-search"></i></span>
								</div>
							</form>
						</div>
					</div>
					<div>
						<span id="del" style="display:none;">
							<a class="label">添加标签</a>
							<a class="label label-warning">选择谁能看到他们</a>
							<a class="label label-important">删除</a>
						</span>
						<span id="selectAll" style="font-size:12px;color:#CCC;display:inline;">
							添加联系人标签、选择谁能看、删除
						</span>
						<button id="btn" class="label pull-right" onclick="selectAll()">选择全部</button>
					</div>
					<div>
						<hr style="border-top:2px solid #ccc" />
					</div>
					<div>
						<c:forEach items="${contactsList}" var="contact">
							<label class="checkbox" style="margin-bottom:10px">
								<input name="checkbox" type="checkbox" >
								<c:if test="${contact.type}">
									<img src="<%=basePath%>img/company.PNG" alt="" />
									<div class="help-inline">
										<a href="<%=basePath%>contacts/contactInformation?id=${contact.id}" style="font-size:16px;">${contact.contactName}</a><br />
										${contact.contactName}<br/>
									</div>
								</c:if>
								<c:if test="${!contact.type}">
									<img src="<%=basePath%>img/head.PNG" alt="" />
									<div class="help-inline">
										<a href="<%=basePath%>contacts/contactInformation?id=${contact.id}" style="font-size:16px;">${contact.contactName}</a><br />
										${contact.contactName} at ${contact.company}<br/>
									</div>
								</c:if>
								<hr/>
							</label>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="<%=basePath%>js/jquery.js"></script>
	<script src="<%=basePath%>js/bootstrap.min.js"></script>
	<script type="text/javascript">
		var ch=true;
		function selectAll(){
			if (ch) {
				document.getElementById("btn").innerHTML="取消全部";
				document.getElementById("del").style.display="inline";
				document.getElementById("selectAll").innerHTML="";
				checkboxs = document.getElementsByName("checkbox");
				for ( var i = 0; i < checkboxs.length; i++) {
					var checkbox = checkboxs[i];
					checkbox.checked="checked";
				}
				ch=false;
			} else if(!ch){
				document.getElementById("btn").innerHTML="选择全部";
				document.getElementById("del").style.display="none";
				document.getElementById("selectAll").innerHTML="添加联系人标签、选择谁能看、删除";
				for ( var i = 0; i < checkboxs.length; i++) {
					var checkbox = checkboxs[i];
					checkbox.checked="";
				}
				ch=true;
			}
		}
		/* 
		function showSearch(){
			document.getElementById("showSearch").style.display="inline";
		} */
		$(document).ready(function showSearch(){
			
			$("#searchName").click(function showsearch(){
				$("#showSearch").slideUp("slow");
			});
			
		});
	</script>
	
	
</body>
</html>